<template>
  <!--  包装容器  -->
  <div class="wrapper">
    <h2 class="title">百科</h2>
    <ul>
      <li class="item" v-for="item of ListB" :key="item.id">
        <div class="item-left">
          <p class="item-left-title">{{item.title}}</p>
          <p class="item-left-text">{{item.text}}</p>
          <p class="item-time"><span>{{item.figure}}</span><span>{{item.time}}</span></p>
        </div>
        <div class="item-right">
          <img :src="item.imgUrl">
        </div>
      </li>
    </ul>
    <!-- 查看更多 -->
    <router-link tag="div" to="/baike/" class="item-more">查看更多</router-link>
  </div>
</template>

<script>
  export default {
    name: 'HomeWikipedia',
    data () {
      return {
        ListB: [{
          id: '0001',
          title: '房产税',
          text: '以房屋为征税对象，按房屋的计税余值或出租房屋的租金收入征税的一种税。',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200423/b6b5c45c701d4dedacd7716c1ba2ab8e.jpg?x-oss-process=image/resize,w_250',
          figure: '阅览量',
          time: '1000+'
        }, {
          id: '0002',
          title: '房产营业税',
          text: '以房屋为征税对象，按房屋的计税余值或出租房屋的租金收入征税的一种税。',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200421/4d848d570e004e759d17452c496d529c.jpg?x-oss-process=image/resize,w_250',
          figure: '阅览量',
          time: '4000+'
        }, {
          id: '0003',
          title: '房地产契税',
          text: '以房屋为征税对象，按房屋的计税余值或出租房屋的租金收入征税的一种税。',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200416/85223f11bb7d4613bc7c201ff3a4a89f.jpg?x-oss-process=image/resize,w_250',
          figure: '阅览量',
          time: '5000+'
        }]
      }
    },
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()

  .title
    title()

  .item
    item()
    BackgroundShadow()
    margin .4rem 0

  .item-left
    width 5rem
    height 2rem
    display flex
    flex-direction column

  .item-left-title
    line-height: .64rem;
    font-size .34rem
    font-weight bolder

  .item-left-text
    margin .053333rem 0 .4rem .026667rem
    line-height: 1.7em;
    overflowEllipsis()

  .item-right
    width 2.3rem
    height 2rem
    overflow hidden

  .item-right img
    img()

  .item-time
    information()

  .item-more
    button()
</style>
